﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Lists</title>
    <meta charset="utf-8" />
    //ul type attribute is obsolete; that is why I use CSS
    <style>
        .circle{
            list-style-type:circle;
        }

        .square{
            list-style-type:square;
        }

        .disc{
            list-style-type:disc;
        }
    </style>
</head>
<body>
    <div>Preceding text</div>
    <ol type="I">
        <li>List Item 1
            <ol type="a">
                <li>Nested item 1.1</li>
                <li>Nested item 1.2</li>
            </ol>
        </li>
        <li>List Item 2
            <ol>
                <li>Nested item 2.1</li>

                <li>Nested item 2.2
                    <ul class="circle">
                        <li>Nested item 2.2.1</li>
                        <li>
                            Nested item 2.2.2
                            <ul class="square">
                                <li>Nested Item 2.2.2.1</li>
                                <li>Nested Item 2.2.2.2</li>
                            </ul>
                        </li>
                        <li>Nested item 2.2.3</li>
                    </ul>
                </li>
                <li>Nested item 2.3</li>
            </ol>
        </li>
        <li>List Item 3
            <ul class="disc">
                <li>Nested item 3.1</li>
                <li>Nested item 3.2</li>
                <li>Nested item 3.3</li>
            </ul>
        </li>
    </ol>
</body>
</html>
